<template>
  <div>
    <van-nav-bar title="会员中心" />
    <div class="userHead">
      <div class="userHead-img">
        <img src="./images/cart.jpeg" alt />
      </div>
    </div>
    <div class="functional">
      <van-button type="primary">我要登录</van-button>
      <van-button type="info">我要注册</van-button>
    </div>
    <van-collapse v-model="activeNames">
      <van-collapse-item title="会员卡" name="1">内容</van-collapse-item>
      <van-collapse-item title="地址管理" name="2">内容</van-collapse-item>
      <van-collapse-item title="我的订单" name="3">内容</van-collapse-item>
      <van-collapse-item title="会员权益" name="4">内容</van-collapse-item>
      <van-collapse-item title="联系我们" name="5">内容</van-collapse-item>
    </van-collapse>
  </div>
</template>
<script>
export default {
  name: "Profile",
  data() {
    return {
      activeNames: ["1"]
    };
  }
};
</script>
<style  scoped>
/* 头像 */
.userHead {
  position: relative;
  height: 132px;
  background-color: #eea2ad;
}
.userHead .userHead-img {
  position: absolute;
  width: 70px;
  height: 70px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  overflow: hidden;
}
.userHead .userHead-img img {
  width: 100%;
}

/* 功能按钮 */
.functional {
  position: relative;
  height: 65px;
  line-height: 58px;
  border-bottom: 1px solid #ccc;
}
.functional button {
  top: 50%;
  transform: translateY(-50%);
  box-shadow: 3px 3px 3px #888888;
}
.functional button:nth-child(1) {
  position: absolute;
  left: 50px;
}
.functional button:nth-child(2) {
  position: absolute;
  right: 50px;
}
</style>
